/*水平局中*/
/*

方法一
优点：兼容性好；
不足：需要同时设置子元素和父元素
.parent{
	texta-align:center;

	background: #8BE0EF;
	width: 100%;
	height: 700px;
}
.child{
	display: inline-block;

	background: #EB9494;
	width: 100%;
	height: 500px;
}
*/


/*
方法二
优点：兼容性好
缺点: 需要指定宽度
.child{
	background: #ED9C9C;
	width: 200px; 
	height: 200px;

	margin: 0 auto;
}*/


/*
方法三
优点:只需要对自身进行设置
不足:IE6,7需要调整结构
.child{
	display: table;
	margin:  0 auto;

}
 */


/*方法四
使用绝对定位
不足：兼容性差,IE9及以上可用
.parent{
	position:relative;
}
或者实用margin-left的负值为盒子宽度的一半也可以实现，
不过这样就必须知道盒子的宽度，但兼容性好
.child { 
	position:absolute;
	left:50%;
	transform:translate(-50%);
}*/


/*方法五
flex布局实现
缺点：兼容性差，如果进行大面积的布局可能会影响效率

(1)
.parent{
	display: flex;
	justify-content: center;
}
(2)
.parent {
	display: flex;
}
.child {
	margin: 0 auto;
}*/

/*垂直居中*/
/*第一种方法*/

/*.parent {
    display: table-cell;
    display:inline-block;
    vertical-align: middle;
    height: 20px;
}
*/


/*第二种方法
.parent {
	display:inline-block;
	vertical-align:middle;
	line-height:20px;
}*/


/*实用绝对定位
.parent {
    position: relative;
}

.child {
    positon: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
*/


/*实用flex实现
.parent {
    display: flex;
    align-items: center;
}*/

/*水平垂直全部居中 利用vertical-align,text-align,
inline-block实现 
.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child {
    display: inline-block;
}

利用绝对定位实现 
.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/
/*利用flex实现 */

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #72E1E2;
}
.child{
	width: 80%;
	text-align: center;
}